<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jquery实现购物车案例</title>
    <style>
        table {
            width: 500px;
            margin: 100px auto;
            border-collapse: collapse;
            text-align: center;
        }
        
        td,
        th {
            border: 1px solid #333;
        }
        
        thead tr {
            height: 60px;
            background-color: #ccc;
        }
        
        .height {
            height: 100px;
        }
        
        .checkbox {
            width: 20px;
            height: 20px;
        }
        
        .foottr {
            width: 500px;
            height: 40px;
            border: 1px solid #333;
            /* background-color: rgb(238, 238, 238); */
        }
        
        .foottr td {
            border: none;
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>选项</th>
                <th>编号</th>
                <th>书名</th>
                <th>购书人</th>
                <th>性别</th>
                <th>购书价</th>
            </tr>
        </thead>
        <tbody> </tbody>
    </table>
</body>
<script src="../jQuery包/jquery-3.6.0.js"></script>
<script>
    //用一个对象来储存数据
    var Obj = [{
        num: 1001,
        bookname: '<img style="width:70px;hieght:70px;" src="javascriptbook.png"></img>',
        name: '李小明',
        sex: '男',
        money: '35.6元'
    }, {
        num: 1002,
        bookname: '<img style="width:70px;hieght:70px;" src="htmlbook.png"></img>',
        name: '刘明明',
        sex: '女',
        money: '37.8元'
    }, {
        num: 1003,
        bookname: '<img style="width:70px;hieght:70px;" src="cssbook.png"></img>',
        name: '张小星',
        sex: '女',
        money: '45.6元'
    }]

    var tbody = $('tbody');
    for (var i = 0; i < Obj.length; i++) {
        var tr = $('<tr class="height"></tr>'); //创建行
        var onetd = $('<td><input class="checkbox person" type="checkbox"></input></td>'); //添加一个复选框
        tr.append(onetd);
        for (var k in Obj[i]) { //遍历对象，并创建列
            var td = $('<td></td>');
            td.html(Obj[i][k]);
            tr.append(td);
        }
        tbody.append(tr);
    }
    var fottr = $('<tr class="foottr"><td style="font-size:14px;font-width:"200px;"><input class="checkbox all"  type="checkbox">全选</td><td><button class="error">删除</button></td> </tr>')
    tbody.append(fottr);
    //用全选框控制所有的复选框，点击了全选框后所有的其他复选框都会被选中
    var allbtn = $('.all');
    var personbtn = $('.person');
    allbtn.click(function() {
            personbtn.each(function(index, element) {
                $(element).prop("checked", true)
                    // console.log($(element).prop("checked")  );
            })
        })
        //这个是点击一次删除键，表单的最后一行就会被删除
    var error = $('.error');
    var trr = $('.height');
    error.click(function() {
        trr[trr.length - 1].remove();
        trr.length--;
    })
    console.log(1);
</script>

</html>